<template>
  <div>
    <p>
        第一步：(如果老师更新了接口地址，先去/api/request.js里面修改baseurl)  去接口文档获取接口地址，以及看清是什么请求（query请求，body请求）
    </p>  
    <p>
        第二步：到/api/index.js里定义函数，例如reqgetUsersByPage
    </p>  
    <p> 
        第三步： 在store的相应js文件(如果没有自己创建，创建后要在store/index.js里引入合并)里设置state存储请求返回的数据，action内写异步请求
    </p> 
    <p> 
        第四步：
        ...mapState({
                usersMsgList: (state) => state.test.usersMsgList,
            })
        获取数据，将数据渲染到页面
    </p> 
    分页获取用户列表：
    <div v-for="(item,index) in usersMsgList" :key="index">
        
        用户名：{{ item.uname}}
    </div>
   
    <button @click="userRegister()">注册</button>
    <button @click="userLogin()">登录</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "test",
  data() {
    return {
      pageNum: 1,
      pageSize: 2,
      userMsg: {
        // uaccount:"testShuang",
        // uemail:"23142143234@qq.com",
        // upwd:"123456",
        uaccount: "lalal", //账号
        uemail: "23142143234@qq.com",
        upwd: "4546565",
        uname: "shuang",
        udelete: false,
        ugender: "",
        uid: 0,
        uinfo: "",
        uintegral: 0,
        upwdans: "",
        upwdask: "",
        uregtime: "",
        uremarks: "",
        utel: "",
      },
    };
  },
  onload() {},
  mounted() {
    // getUsersByPage({ commit },pageNum,pageSize)
    this.$store.dispatch("getUsersByPage", {
      pageNum: this.pageNum,
      pageSize: this.pageSize,
    });
    //注册
    // this.$store.dispatch("register",{userMsg:this.userMsg});
  },
  methods: {
    async userRegister() {
      //   const { phone, code, password, password1 } = this;
      await this.$store.dispatch("register", {
        uaccount: this.userMsg.uaccount,
        uemail: this.userMsg.uemail,
        upwd: this.userMsg.upwd,
        uname: this.userMsg.uname,
        udelete: this.userMsg.udelete,
        ugender: this.userMsg.ugender,
        uid: 0,
        uinfo: this.userMsg.uinfo,
        uintegral: 0,
        upwdans: this.userMsg.upwdans,
        upwdask: this.userMsg.upwdask,
        uregtime: this.userMsg.uregtime,
        uremarks: this.userMsg.uremarks,
        utel: this.userMsg.utel,
      });
    },
    async userLogin() {
      await this.$store.dispatch("login", {
        uaccount: this.userMsg.uaccount,
        upwd: this.userMsg.upwd,
      });
    },
  },
  computed: {
    ...mapState({
      usersMsgList: (state) => state.test.usersMsgList,
    }),
  },
};
</script>

<style>
p {
  margin: 20px;
  text-align: left;
}
</style>